<template>
  <div class="login2">
    <LoginHeader title="使用邮箱验证码登录">
      <template #left>
        <van-icon name="arrow-left" @click="$router.push({ name: `login` })" />
      </template>
    </LoginHeader>
    <div class="content">
      <div class="logo-box">
        <img src="@/assets/img/logo1.png" alt="" />
      </div>
      <div class="input-box">
        <van-field
          v-model="entity.email"
          clearable
          label="Email"
          placeholder="输入邮箱地址"
        />
        <van-field
          v-model="entity.vcode"
          center
          clearable
          label="邮箱验证码"
          placeholder="输入邮箱验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="vObj.disable"
              @click="vcodeBtnClick"
              >{{ vObj.text }}</van-button
            >
          </template>
        </van-field>

        <div style="margin-top: 30px; padding: 12px 30px; text-align: center">
          <van-button type="primary" round block style="height" @click="login"
            >登录</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginHeader from "@/components/LoginHeader";
import {Toast} from 'vant';
export default {
  name: "login2",
  components: {
    LoginHeader,
  },
  data() {
    return {
      entity: {
        email: "",
        vcode: "",
        loginType: 2,
      },
      vObj: {
        text: "发送验证码",
        disable: false,
        interval: null,
      },
    };
  },
  methods: {
    vcodeBtnClick() {
      var $t = this;
      function timeoutSleep() {
        clearInterval($t.vObj.interval);
        $t.vObj.disable = true;
        let count = 60;
        $t.vObj.interval = setInterval(() => {
          if (count == 0) {
            $t.vObj.disable = false;
            $t.vObj.text = "发送验证码";
            window.clearInterval($t.vObj.interval);
            return;
          }
          $t.vObj.text = count + "后重试";
          count--;
        }, 1000);
      }
      // 发送验证码
      this.$server.user.sendEmail(this.entity.email).then(res=>{
          const { data } = res;
          if(data.code == 200){
             timeoutSleep();
          }else {
              alert(data.msg);
          }
      })

    },

    // 登录
    login() {
      this.$server.user.login(this.entity).then((res) => {
        const { data } = res;
        if( data.code == 200){
           var jwtToken = data.token;
            sessionStorage.setItem("token",jwtToken);
             this.$router.push({
                    name:"index"
                })
        }else {
            Toast({
            message: data.msg,
            position: 'top',
            });
        }
        console.log(data);
      });

     
    },
  },
};
</script>

<style lang="less" scoped>
.login2 {
  background-color: #f3f3f3;
  height: 100vh;
  .content {
    padding: 20px 40px;
    margin-top: 15px;

    .logo-box {
      padding-top: 50px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 200px;
      }
    }

    .input-box {
      margin-top: 60px;
    }
  }
}
</style>